<template>
  <div class="con">
    <v-chart
      :options="newOption"
      :auto-resize="true"
      @click="chartClick"
    />
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import lodash from 'lodash'
@Component
export default class barchart extends Vue {
  @Prop() chartData!: any;
  @Prop() title!: any;
  public option: EChartOption = {
    // color: ["#00C9FF", "#3188EC", "#EB6F49"],
    title: {
      text: this.title,
      left: "center",
      top: "center",
      textStyle: {
        fontSize: 16,
        color: "#fff",
        fontWeight: "200",
      },
    },
    series: [
      {
        name: "负载率",
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        hoverAnimation: false,
        labelLine: {
          show: false,
        },
        data: [
          { value: 7, name: "80%以下" },
          { value: 5, name: "80%-100%" },
          { value: 10, name: "100%以上" },
        ],
      },
    ],
  };
  public chartClick(val: Object): void {
    // console.log(val);
  }
  get newOption(){
    let option=lodash.cloneDeep(this.option)
    let chartData=this.chartData.map(v=>{
      return {
        name:v.name,
        value:v.value,
        itemStyle:{
          color:v.color
        }
      }
    })
    option.series[0].data=chartData
    return option
  }
}
</script>
<style lang="scss" scoped>
.con {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
